<template>
    <n-form ref="formRef" :model="model" style="border-radius: 10px; background-color: aliceblue; padding: 20px;">
       
      <div style="color:#ff0000;" v-if="errRef=='验证成功'">验证成功</div>
      <div style="color:#00ff00;" v-else-if="errRef=='验证失败'">验证失败</div>
      <div style="color:#000000;" v-else>请登录验证</div>
   ------------------
      <div style="color:#ff0000;" v-show="errRef=='验证成功'">验证成功</div>
      <div style="color:#00ff00;" v-show="errRef=='验证失败'">验证失败</div>
      <div style="color:#000000;" v-show="errRef==''">请登录验证</div>
  
  ------------------------
      <div v-for="(item,index) in itemRef" :key="item.name">
       {{ index }} {{ item.name }}
      </div>
  
      <n-form-item path="username"  :label="propRef">
        <n-input v-model:value="model.username" @keydown.enter.prevent />
      </n-form-item>
    
      <n-form-item path="password" label="密码">
        <n-input
          v-model:value="model.password"
          type="password" 
          @keydown.enter.prevent
        />
      </n-form-item>
      <n-form-item
        ref="rPasswordFormItemRef"
        first
        path="reenteredPassword"
        label="重复密码"
      >
        <n-input
          v-model:value="model.reenteredPassword"
          :disabled="!model.password"
          type="password"
          @keydown.enter.prevent
        />
      </n-form-item>
      <n-row :gutter="[0, 24]">
        <n-col :span="24">
          <div style="display: flex; justify-content: flex-end">
            <n-button
              :disabled="model.username === null" 
              type="primary"
              @click="handleValidateButtonClick"
            >
              登录
            </n-button>
          </div>
        </n-col>
      </n-row>
    </n-form>
  
    <pre>{{ JSON.stringify(model, null, 2) }}
  </pre>
  </template>
  
  <script lang="ts">
  import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
   
  import { defineComponent, ref } from 'vue'
  
  interface ModelType {
    username: string | null
    password: string | null
    reenteredPassword: string | null
  }
  
  export default defineComponent({
    setup() {
      
      const errRef = ref<String>('')
      const itemRef = ref<[]>([])
      const propRef = ref<String>("用户")
      const formRef = ref<FormInst | null>(null)
      const rPasswordFormItemRef = ref<FormItemInst | null>(null)
        console.log(propRef.value)
      const modelRef = ref<ModelType>({
        username: null,
        password: null,
        reenteredPassword: null
      })
      function validatePasswordStartWith(
        rule: FormItemRule,
        value: string
      ): boolean {
        return (
          !!modelRef.value.password
          && modelRef.value.password.startsWith(value)
          && modelRef.value.password.length >= value.length
        )
      }
      function validatePasswordSame(rule: FormItemRule, value: string): boolean {
        return value === modelRef.value.password
      }
  
      itemRef.value.push({
        name:"第一个"
      })
  
      itemRef.value.push({
        name:"第二个"
      })
  
      return {
        itemRef,
        errRef,
        propRef,
        formRef,
        rPasswordFormItemRef,
        model: modelRef, 
        handlePasswordInput() {
          if (modelRef.value.reenteredPassword) {
            rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
          }
        },
        handleValidateButtonClick(e: MouseEvent) {
          e.preventDefault()
          console.log(modelRef.value)
          if(modelRef.value.password == modelRef.value.reenteredPassword) {
             console.log("验证成功")
             errRef.value = "验证成功"
             itemRef.value.push({
              name:"登录成功+1"
             })
          } else {
            // alert("验证失败")
            errRef.value = "验证失败"
            itemRef.value.push({
              name:"登录成功-1"
             })
          }
          // formRef.value?.validate((errors) => {
          //   if (!errors) {
          //     console.log('验证成功')
          //   }
          //   else {
          //     console.log(errors) 
          //   }
          // })
        }
      }
    }
  })
  </script>